<template>
	<div class="rank w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>课程榜</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report"> 
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入标题、讲师……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
           </div>
			<el-table ref="multipleTable" :data="tableData" border>
				<el-table-column label="排名" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
				<el-table-column prop="lecturerName" label="讲师" width="200"></el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				rank:'',
				search:'',
				tableData: [],
				searchSelect: [],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
		        pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods: {
			getTableList() {
				let that = this;
				this.$ajax({
					url: this.$root.jifuUrl + "/courseRankingList?" + 'page=' + this.currentpage + '&num=' + this.pagesize +'&columnid='+this.searchSelect + '&name=' + this.search+'&rootcompanyid='+1,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total = res.data.data.pageParam.items;
						}
					}
				});
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
		    handleCurrentChange (value) {
		        this.currentpage = value;
		        this.getTableList();
		    },
		    getColumnList(){
				let columnType = [1,5];
				this.$rootFunction().columnList({columnType});
			},
			reBack(){
				this.$router.go(-1);
			}
		},
		mounted: function() {
			this.getTableList();
			this.getColumnList();
			this.rank = this.$root.huasan.rank;
		}
	}
</script>